<template>
  <div class="grid-item-adapter" :style="computedStyle">
    <slot></slot>
  </div>
</template>

<script>
import { defineComponent, computed } from 'vue'

export default defineComponent({
  name: 'GridItem',
  props: {
    x: {
      type: Number,
      required: true
    },
    y: {
      type: Number,
      required: true
    },
    w: {
      type: Number,
      required: true
    },
    h: {
      type: Number,
      required: true
    },
    i: {
      type: String,
      required: true
    }
  },
  setup(props) {
    // 计算样式，基于网格位置和大小
    const computedStyle = computed(() => {
      return {
        // 使用flex-basis和flex-grow来模拟网格布局
        flexBasis: `calc(${(props.w / 12) * 100}% - 20px)`,
        minHeight: `${props.h * 30}px`,
        order: props.y * 12 + props.x // 使用order属性来控制位置
      }
    })

    return {
      computedStyle
    }
  }
})
</script>

<style scoped>
.grid-item-adapter {
  position: relative;
  transition: all 0.2s ease;
  margin-bottom: 20px;
}
</style>